[#include "../../../common/html.ftl" /]
[@html]
    [@head title="添加菜单" css=["fw"] /]
    [@body]
        [@formMain ]
            <div class="fw-forms">
                [@dataForm formId="form-menu-edit" ]
                    <input id="treeId" name="menuId" type="hidden" value="${(sysMenu.menuId)!}" />
                    <input id="treeId" name="parentId" type="hidden" value="${(sysMenu.parentId)!'0'}" />
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">菜单名称：</label>
                        <input class="am-form-field am-radius" type="text" name="menuName" value="${(sysMenu.menuName)!}" required/>
                    </div>
                    <div class="am-form-group am-form-icon am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>上级菜单：</label>
                        <i class="am-icon-bars" onclick="clearMenuTree()"></i>
                        <input id="treeName" class="am-form-field am-radius" type="text" onclick="selectMenuTree()" value="${(sysMenu.parentName)!'主目录'}" readonly/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">菜单类型：</label>
                        <select class="am-radius" name="menuType" onchange="menuVisible()" required>
                            <option value="">-- 请选择 --</option>
                            [#if sysMenu.menuType?? && sysMenu.menuType == 'M']<option value="M" selected>目录</option>[#else]<option value="M">目录</option>[/#if]
                            [#if sysMenu.menuType?? && sysMenu.menuType == 'C']<option value="C" selected>菜单</option>[#else]<option value="C">菜单</option>[/#if]
                            [#if sysMenu.menuType?? && sysMenu.menuType == 'F']<option value="F" selected>按钮</option>[#else]<option value="F">按钮</option>[/#if]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">显示排序：</label>
                        <input class="am-form-field am-radius" type="text" name="orderNum" value="${(sysMenu.orderNum)!}" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">菜单状态：</label>
                        <select class="am-radius" name="visible" required>
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_menu_visible") as dict ]
                                [#if dict.dictValue == sysMenu.visible ]
                                    <option value="${dict.dictValue!}" selected>${dict.dictLabel}</option>
                                [#else]
                                    <option value="${dict.dictValue!}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">是否系统内置：</label>
                        <select class="am-radius" name="buildIn" required>
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("sys_yes_no") as dict]
                                [#if dict.dictValue == sysMenu.buildIn ]
                                    <option value="${dict.dictValue!}" selected>${dict.dictLabel}</option>
                                [#else]
                                    <option value="${dict.dictValue!}">${dict.dictLabel}</option>
                                [/#if]
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label class="is-required">请求地址：</label>
                        <input class="am-form-field am-radius" type="text" name="url" value="${(sysMenu.url)!}" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>打开方式：</label>
                        <select class="am-radius" name="target">
                            <option value="">-- 请选择 --</option>
                            [#if sysMenu.target?? && sysMenu.target == 'menuItem']<option value="menuItem" selected>页签</option>[#else]<option value="menuItem">页签</option>[/#if]
                            [#if sysMenu.target?? && sysMenu.target == 'menuBlank']<option value="menuBlank" selected>新窗口</option>[#else]<option value="menuBlank">新窗口</option>[/#if]
                            [#if sysMenu.target?? && sysMenu.target == 'menuCustom-DbConnect']<option value="menuCustom-DbConnect" selected>数据库连接管理</option>[#else]<option value="menuCustom-DbConnect">数据库连接管理</option>[/#if]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>权限标识：</label>
                        <input class="am-form-field am-radius" type="text" name="perms" title="控制器中定义的权限标识，如：@RequiresPermissions('')" value="${(sysMenu.perms)!}" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-6 am-u-lg-4">
                        <label>图标：</label>
                        <input class="am-form-field am-radius" type="text" name="icon" value="${(sysMenu.icon)!}" />
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label>备注：</label>
                        <textarea class="am-radius" name="remark" rows="5" >${(sysMenu.remark)!}</textarea>
                    </div>
                [/@dataForm]
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script js=["fw", "validate"] progress="false" ]
            <script type="text/javascript">
                var prefix = ctx + "osfw/system/manage/menu";

                $(function() {
                    menuVisible();
                });

                $("#form-menu-edit").validate({
                    rules:{
                        menuName:{
                            maxlength: 50,
                            remote: {
                                url: prefix + "/checkMenuNameUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    "menuId": function() {
                                        return $("input[name='menuId']").val();
                                    },
                                    "parentId": function() {
                                        return $("input[name='parentId']").val();
                                    },
                                    "menuName" : function() {
                                        return $.common.trim($("input[name='menuName']").val());
                                    }
                                },
                            }
                        },
                        orderNum: {
                            digits:true,
                            maxlength: 4
                        },
                    },
                    messages: {
                        "menuName": {
                            remote: "菜单已经存在"
                        }
                    },
                    onkeyup: false,
                    focusCleanup: true
                });

                function menuVisible() {
                    var menuType = $('select[name="menuType"] option:selected').val();
                    if (menuType == "M") {
                        $("input[name='url']").parents(".am-form-group").hide();
                        $("input[name='perms']").parents(".am-form-group").hide();
                        $("input[name='icon']").parents(".am-form-group").show();
                        $("select[name='target']").parents(".am-form-group").show();
                        $("select[name='visible']").parents(".am-form-group").show();
                    } else if (menuType == "C") {
                        $("input[name='url']").parents(".am-form-group").show();
                        $("input[name='perms']").parents(".am-form-group").show();
                        $("input[name='icon']").parents(".am-form-group").show();
                        $("select[name='target']").parents(".am-form-group").show();
                        $("select[name='visible']").parents(".am-form-group").show();
                    } else if (menuType == "F") {
                        $("input[name='url']").parents(".am-form-group").hide();
                        $("input[name='perms']").parents(".am-form-group").show();
                        $("input[name='icon']").parents(".am-form-group").hide();
                        $("select[name='target']").parents(".am-form-group").hide();
                        $("select[name='visible']").parents(".am-form-group").show();
                    }
                }

                function selectMenuTree() {
                    var treeId = $("#treeId").val();
                    var menuId = $.common.isNotEmpty(treeId) ? treeId : 0;
                    var url = ctx + "osfw/system/manage/menu" + "/selectMenuTree/" + menuId;
                    $.modal.open('菜单选择', url, "380", "500", doSubmit);
                }

                function doSubmit(index, modalo) {
                    var iframeWin = modalo.find('iframe')[0];
                    var treeId = iframeWin.contentWindow.document.querySelector('#treeId').value;
                    var treeName = iframeWin.contentWindow.document.querySelector('#treeName').value;
                    $("#treeId").val(treeId);
                    $("#treeName").val(treeName);
                    modalo.modal('close');
                    modalo.remove();
                }

                function clearMenuTree() {
                    $("#treeId").val("0");
                    $("#treeName").val("主目录");
                }

                function submitHandler() {
                    if($.validate.form()) {
                        $.operate.save(prefix + "/edit", $('#form-menu-edit').serialize());
                    }
                }
            </script>
        [/@script]
    [/@body]
[/@html]